<script lang="ts" setup>
    import { reactive, ref, computed, onMounted, defineProps, watch } from 'vue';
    import API from '@/services';
    import { useRoute } from 'vue-router';
    import { useStore } from '@/store';
    import { Message } from '@arco-design/web-vue';
    import { TABLE_DETAIL_COLUMNS } from '@/constants/dataManage';
    import mainkey from '@/assets/images/mainkey_img.svg';
    import zone from '@/assets/images/zone_img.svg';
    import { ElMessageBox } from 'element-plus/lib/index';
    import AddTableDrawer from '../addTableDrawer/index.vue'
    import type { IPageConfigVO } from '@/types/base';
   
    const store = useStore();

    const route = useRoute();
    const tableId = ref(route.query.id);

    const synColumnStatus = ref<any>()
    const props = defineProps({
        tableDetail: {
            type: Object
        }
    })
    const loading = ref(false);
    // 新增字段
    const addFieldvisible = ref<boolean>(false)

    const tableDrawerRef= ref()

    // 获取表数据
    const getTableData: any = reactive({
        data: [] as any[]
    });
    const formData : any = reactive({
        tableFieldName: undefined,
    });

    const pageConfig = reactive<IPageConfigVO>({
        total: 0,
        pageSize: 10,
        pageNum: 1,
        showTotal: true, // 是否显示总数
        showJumper: false, // 是否显示跳转
        showPageSize: true, // 是否显示数据条数选择器
        pageSizeOptions: [10, 20,30,40,50],
        hideOnSinglePage: true
    })
    /* 列表 */
    const getTableDetailList = async () => {
        const {pageSize, pageNum} = pageConfig
        loading.value = true
        try {
            const {data, code} = await API.dataTable.postDataTableFieldPage({
                pageSize,
                pageNum,
                tableId: tableId.value as any,
                tableFieldName: formData.tableFieldName
            });
            if (code === 200) {
                getTableData.data = data?.list || [];

                pageConfig.total = data?.total || 0;
            } 
            loading.value = false;
        } catch (e) {
            loading.value = false;
        }
    };
    // 表格分页 和  改变一页数量
    const handlePageChange = (pageNum:any) => {
        pageConfig.pageNum = pageNum
        getTableDetailList()
    }
    const handlePageSizeChange = (pageSize: any) => {
        pageConfig.pageNum = 1
        pageConfig.pageSize = pageSize
        getTableDetailList()
    }

    const handleAddField = () => {
        if (!synColumnStatus.value) {
            ElMessageBox.alert('正在执行增加字段操作，请耐心等待', '提示', {
                confirmButtonText: '我知道了',
                callback: () => {},
            })
        } else if (synColumnStatus.value === 1) {
            addFieldvisible.value = true
            tableDrawerRef.value.visibleDrawer()//调用子组件的show方法
        } else {
            Message.error('同步表字段失败了')
        }
    }

    // 添加字段成功后，刷新表结构列表数据
    const handleChangeField = () => {
        pageConfig.pageNum = 1
        getTableDetailList()
    }

    // 监听详情数据
    watch(() => props.tableDetail, (val: any) => {
       synColumnStatus.value = val.synColumnStatus
    },{
      immediate: true
    });
    onMounted(() => {
        getTableDetailList()
    })

</script>

<template>
    <div class="table-filter p-18">
        <a-input-search
            v-model="formData.tableFieldName"
            :style="{width:'300px'}"
            placeholder="请输入关键词搜索"
            @search ='getTableDetailList'
            @press-enter="getTableDetailList"
            />
        <a-button type="primary" @click="handleAddField">添加字段</a-button>
    </div>
    <a-table
      :columns="TABLE_DETAIL_COLUMNS"
      :data="getTableData.data"
      :pagination="pageConfig"
      :loading="loading"
      @page-change="handlePageChange"
      @page-size-change="handlePageSizeChange"
      class="p-18 mt-18 tableDeail"
    >
      <template #tableFieldName="{ record, rowIndex }">
        {{record.tableFieldName}}
        <span v-show="record.ifPrimaryKey">
            <a-tooltip content="主键" mini>
                <img :src="mainkey" alt="">
            </a-tooltip>
        </span>
        <span v-show="record.ifPartition">
            <a-tooltip content="分区" mini>
                <img :src="zone" alt="">
            </a-tooltip>
        </span>
      </template>
    </a-table >
    <add-table-drawer ref="tableDrawerRef" @add-field="handleChangeField"></add-table-drawer>

</template>

<style lang="scss" scoped>
    .table-filter {
        display: flex;
        justify-content: space-between;
        :deep(.arco-input-wrapper) {
            .arco-input{
                border-right: 1px solid #d4d7e1;
            }
        }
    }
    .tableDeail {
        img {
            vertical-align: middle;
            margin-left: 6px;
        }
    }
</style>
